<!--
 * @Date: 2020-08-13 09:43:33
 * @LastEditors: leehave
 * @LastEditTime: 2020-09-05 17:44:26
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>微信授权登录</title>
  </head>
  <style>
    body {
      position: relative;
      box-sizing: border-box;
      width: 100%;
      height: 100vh;
      background-color: #f5f5f5;
    }
    .loader {
      font-size: 90px;
      text-indent: -9999em;
      position: absolute;
      top: 40%;
      overflow: hidden;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin: 0.8em auto;
      position: relative;
      -webkit-animation: load6 1.7s infinite ease;
      animation: load6 1.7s infinite ease;
      -webkit-transform: translateZ(0);
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
      transform: translateZ(0);
    }
    @-webkit-keyframes load6 {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        box-shadow: -0.11em -0.83em 0 -0.4em #8E44AD,
          -0.11em -0.83em 0 -0.42em #8E44AD, -0.11em -0.83em 0 -0.44em #8E44AD,
          -0.11em -0.83em 0 -0.46em #8E44AD, -0.11em -0.83em 0 -0.477em #8E44AD;
      }
      5%,
      95% {
        box-shadow: -0.11em -0.83em 0 -0.4em #8E44AD,
          -0.11em -0.83em 0 -0.42em #8E44AD, -0.11em -0.83em 0 -0.44em #8E44AD,
          -0.11em -0.83em 0 -0.46em #8E44AD, -0.11em -0.83em 0 -0.477em #8E44AD;
      }
      30% {
        box-shadow: -0.11em -0.83em 0 -0.4em #8E44AD,
          -0.51em -0.66em 0 -0.42em #8E44AD, -0.75em -0.36em 0 -0.44em #8E44AD,
          -0.83em -0.03em 0 -0.46em #8E44AD, -0.81em 0.21em 0 -0.477em #8E44AD;
      }
      55% {
        box-shadow: -0.11em -0.83em 0 -0.4em #8E44AD,
          -0.29em -0.78em 0 -0.42em #8E44AD, -0.43em -0.72em 0 -0.44em #8E44AD,
          -0.52em -0.65em 0 -0.46em #8E44AD, -0.57em -0.61em 0 -0.477em #8E44AD;
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        box-shadow: -0.11em -0.83em 0 -0.4em #8E44AD,
          -0.11em -0.83em 0 -0.42em #8E44AD, -0.11em -0.83em 0 -0.44em #8E44AD,
          -0.11em -0.83em 0 -0.46em #8E44AD, -0.11em -0.83em 0 -0.477em #8E44AD;
      }
    }
    @keyframes load6 {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        box-shadow: -0.11em -0.83em 0 -0.4em #8E44AD,
          -0.11em -0.83em 0 -0.42em #8E44AD, -0.11em -0.83em 0 -0.44em #8E44AD,
          -0.11em -0.83em 0 -0.46em #8E44AD, -0.11em -0.83em 0 -0.477em #8E44AD;
      }
      5%,
      95% {
        box-shadow: -0.11em -0.83em 0 -0.4em #8E44AD,
          -0.11em -0.83em 0 -0.42em #8E44AD, -0.11em -0.83em 0 -0.44em #8E44AD,
          -0.11em -0.83em 0 -0.46em #8E44AD, -0.11em -0.83em 0 -0.477em #8E44AD;
      }
      30% {
        box-shadow: -0.11em -0.83em 0 -0.4em #8E44AD,
          -0.51em -0.66em 0 -0.42em #8E44AD, -0.75em -0.36em 0 -0.44em #8E44AD,
          -0.83em -0.03em 0 -0.46em #8E44AD, -0.81em 0.21em 0 -0.477em #8E44AD;
      }
      55% {
        box-shadow: -0.11em -0.83em 0 -0.4em #8E44AD,
          -0.29em -0.78em 0 -0.42em #8E44AD, -0.43em -0.72em 0 -0.44em #8E44AD,
          -0.52em -0.65em 0 -0.46em #8E44AD, -0.57em -0.61em 0 -0.477em #8E44AD;
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        box-shadow: -0.11em -0.83em 0 -0.4em #8E44AD,
          -0.11em -0.83em 0 -0.42em #8E44AD, -0.11em -0.83em 0 -0.44em #8E44AD,
          -0.11em -0.83em 0 -0.46em #8E44AD, -0.11em -0.83em 0 -0.477em #8E44AD;
      }
    }
  </style>
  <body>
    <div class="loader">加载中...</div>
    <script>
      var GWC = {
        version: "1.2.0",
        urlParams: {},
        appendParams: function(url, params) {
          if (params) {
            var baseWithSearch = url.split("#")[0];
            var hash = window.location.hash.split("#")[1];
            if (hash) {
              baseWithSearch = baseWithSearch + "#" + hash;
            }
            for (var key in params) {
              var attrValue = params[key];
              if (attrValue !== undefined) {
                var newParam = key + "=" + attrValue;
                if (baseWithSearch.indexOf("?") > 0) {
                  var oldParamReg = new RegExp(
                    "^" + key + "=[-%.!~*'\(\)\\w]*",
                    "g"
                  );
                  if (oldParamReg.test(baseWithSearch)) {
                    baseWithSearch = baseWithSearch.replace(
                      oldParamReg,
                      newParam
                    );
                  } else {
                    baseWithSearch += "&" + newParam;
                  }
                } else {
                  baseWithSearch += "?" + newParam;
                }
              }
            }
          }

          return baseWithSearch;
        },
        getUrlParams: function() {
          var pairs = location.search.substring(1).split("&");
          for (var i = 0; i < pairs.length; i++) {
            var pos = pairs[i].indexOf("=");
            if (pos === -1) {
              continue;
            }
            GWC.urlParams[pairs[i].substring(0, pos)] = decodeURIComponent(
              pairs[i].substring(pos + 1)
            );
          }
        },
        doRedirect: function() {
          var code = GWC.urlParams["code"];
          var appId = GWC.urlParams["appid"];
          var scope = GWC.urlParams["scope"] || "snsapi_base";
          var state = GWC.urlParams["state"];
          var isMp = GWC.urlParams["isMp"]; //isMp为true时使用开放平台作授权登录，false为网页扫码登录
          var baseUrl;
          var redirectUri;

          if (!code) {
            baseUrl =
              "https://open.weixin.qq.com/connect/oauth2/authorize#wechat_redirect";
            if (scope == "snsapi_login" && !isMp) {
              baseUrl = "https://open.weixin.qq.com/connect/qrconnect";
            }

            //第一步，没有拿到code，跳转至微信授权页面获取code
            redirectUri = GWC.appendParams(baseUrl, {
              appid: appId,
              redirect_uri: encodeURIComponent(location.href),
              response_type: "code",
              scope: scope,
              state: encodeURIComponent(state)
            });
          } else {
            const params = Object.assign({}, GWC.urlParams);
            delete params.backUrl;
            //第二步，从微信授权页面跳转回来，已经获取到了code，再次跳转到实际所需页面
            redirectUri = GWC.appendParams(GWC.urlParams["backUrl"], params);
          }

          location.href = redirectUri;
        }
      };

      GWC.getUrlParams();
      GWC.doRedirect();
    </script>
  </body>
</html>
